<template>
  <view class="list">
    <view class="top">
      <search-bar
        :curr-value="form.name"
        type="route"
        @search="search"
      />
      <my-tablist
        :category-list="categoryList"
        default-tab="全部"
        @change="changeTab"
      />
      <view class="line" />
      <sort-menu
        ref="sortmenu"
        @sort="sort"
        @citySearch="citySearch"
      />
    </view>
    <view class="content">
      <my-waterfall
        :list="list"
        path="/productPages/route/detail"
      />
      <view
        v-if="!list.length"
        class="noResult"
      >
        未匹配到结果，请重新搜索！
      </view>
    </view>
    <!-- <ul class="card">
			<li v-for="item in list" :key="item.id" @click="$jumpUrl(`/productPages/route/detail?id=${item.id}`)">
				<image :src="item.logoImage" class="img" mode="aspectFill" />
				<h1>{{ item.name }}</h1>
				<p class="title font-12 color-555">
					{{ item.description }}
				</p>
				<view class="flex">
					<view class="tagList">
						<view v-show="item.hot==='Y'" class="item">
							精选推荐
						</view>
						<view v-for="(t,i) in item.tagList" :key="i" class="item">
							{{ t.name }}
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="flex">
						<view v-if="item.price" class="start-price">
							{{ item.price }}
						</view>
						<view class="buyNum font-11">
							{{ item.buyMinNumber }}~{{ item.buyMaxNumber }}人起订
						</view>
					</view>
					<view class="font-10 sellNumber">
						销量：{{ item.sellNumber }}
					</view>
				</view>
			</li>
			<view v-if="!list.length" class="noResult" >未匹配到结果，请重新搜索！</view>
		</ul> -->
  </view>
</template>

<script>
	import searchBar from '@/components/search-bar/index.vue';
  import myWaterfall from '@/components/my-waterfall/index.vue';
  import myTablist from '@/components/my-tablist/index.vue';
  import sortMenu from '@/components/sort-menu/index.vue';

	export default {
		components: {
			searchBar,
      myTablist,
			myWaterfall,
      sortMenu
		},
		data() {
			return {
				travelShow: false,
				tripShow: false,
				list: [],
				page: {
					page_size: 10,
					current_page: 1,
					count: 0,
					loading: false,
					finished: false
				},
				form: {
					name: '',
					startCity: '',
          endCity: '',
          days: '',
					price: ''
				},
        filter: {},
        categoryList: [],
        codeList: '',
        defaultCode: '', // 保存首页ico跳转传过来的分类组
        cateId: ''
			};
		},
		onLoad(e) {
			if(e.startCity) {
        this.form.startCity = e.startCity;
			}
      if(e.endCity && e.endCity !== '目的地') {
        this.form.endCity = e.endCity;
      }
      if(e.days) {
        this.form.days = e.days;
      }
			if(e.price) {
				this.form.price = e.price;
			}
      if(e.cateId) {
        this.cateId = e.cateId;
        this.getCategoryList(e.cateId);
      } else {
			  this.queryData(); // 没有传cateId的时候才需要直接获取列表
      }
      if(e.name) {
        this.form.name = e.name;
      }
      if(e.title) {
        uni.setNavigationBarTitle({
          title: e.title
        });
      }
      // this.$store.commit('changeSearchForm', e); // 保存搜索参数
		},
		onPullDownRefresh() {
			this.list = [];
			this.page.current_page = 1;
			this.queryData('refresh');
		},
		onReachBottom() {
			if (this.list.length < this.page.count) {
				this.queryData();
			}
		},
		methods: {
			search(e) {
				console.log('搜索团建列表页', e);
				this.form.name = e.inputValue;
        this.form.city = '';
        this.$refs.sortmenu.reset();
        this.filter = {};
				this.list = [];
				this.page.current_page = 1;
				this.queryData();
			},
			// 列表获取
			queryData(status) {
				uni.showLoading({
				  title: '加载中',
					mask:true
				});
				this.page.loading = true;
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/goods/search',
					data: {
						keywords: this.form.name,
            leaveCity: this.form.startCity,
						destCity: this.form.endCity,
						price: this.form.price,
            day: this.form.days,
            codeList: this.codeList,
            type: 'ROUTE',
            ...this.filter,
						...this.page
					}
				}).then(res => {
					if(!res.data.length){
						uni.hideLoading();
					}
					res.data.forEach((t) => {
						t.tagList = t.tag ? JSON.parse(t.tag) : [];
					});
					this.list.push.apply(this.list, res.data);
					this.page.count = res.count;
					this.page.loading = false;
					if (this.list.length >= this.page.count) {
						this.page.finished = true;
					}
					
					this.page.current_page += 1;
					if (status === 'refresh') {
						uni.stopPullDownRefresh();
					}
				}).catch(() => {
					uni.hideLoading();
        });
			},
			priceChange() {
				this.form.priceSort = this.form.priceSort === 0 ? 1 : 0;
			},
      changeTab(item) {
        console.log('changeTab', item);
        this.list = [];
        this.page.current_page = 1;
        if(item.code) {
          this.codeList = item.code;
        } else {
          this.codeList = this.defaultCode;
        }
        this.queryData();
      },
      getCategoryList(id) {
        this.$ajax({
					method: 'get',
					url: '/outing/mobile/product/ioc/queryCategoryListById',
          data: {
            id
          }
				}).then(res => {
					if(res.data) {
						this.categoryList = res.data;
            if(res.data && res.data.length) {
              const val = res.data.map(e => e.code);
              // console.log('cateList', val, String(val), val.join(','));
              this.codeList = String(val);
              this.defaultCode = String(val);
            }
            this.queryData();
					}
				});
      },
      sort(e) {
        console.log('sort e', e);
        const { type, val } = e;
        if(val) {
          const obj = {
            priceTag: 1,
            sellNumTag: 1
          };
          this.filter = {};
          this.filter[type] = obj[type];
        } else {
          this.filter = {};
          this.filter[type] = 2;
        }
        this.list = [];
        this.page.current_page = 1;
        this.queryData();
      },
      citySearch(e) {
        console.log('cityChange', e);
        this.form.endCity = e;
        this.list = [];
        this.page.current_page = 1;
        this.queryData();
      },
		}
	};
</script>

<style lang="less" scoped>
	.list {
		min-height: 100vh;
		background: #F7F9FB;

		.top {
			background: #FFF;
			padding: 20upx 30upx 0;
      margin-bottom: 30rpx;
      position: relative;

      .line {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        position: absolute;
        width: 100vw;
        left: 0;
      }

			.menuList {
				display: flex;
				margin-top: 30upx;
				position: relative;

				.item {
					display: flex;
					// align-items: center;
					margin-right: 10upx;
				}

				.triangle {
					width: 0;
					height: 0;
					border-top: 14upx solid #CCC;
					border-left: 10upx solid transparent;
					border-right: 10upx solid transparent;
					margin: 10upx 14upx 0;

					// transition: all ease .5s;
					&.s {
						border-top: 0;
						border-bottom: 14upx solid #FE7D15;
					}
				}

				.menuSearch {
					position: absolute;
					left: 0;
					top: 40upx;
					background: #FFF;
					right: 0;
					padding: 30upx;
					z-index: 99;

					.head {
						display: flex;
						border-bottom: 1px dashed #D1D1D1;
						justify-content: space-between;
						padding-bottom: 16upx;
						margin-bottom: 16upx;
					}

					.btn {
						width: 610upx;
						height: 82upx;
						background: linear-gradient(312deg, #FFC77B 0%, #F78833 100%);
						border-radius: 40px;
						text-align: center;
						line-height: 82upx;
						color: #FFF;
						font-size: 32upx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
					}
				}
			}
		}

    .content {
      padding: 0 30rpx;
		  overflow: hidden;
      .noResult {
        padding: 118upx 0;
        text-align: center;
      }
    }

		.card {
			overflow: hidden;
			background: #FFF;
			padding: 0 30upx 60upx;
			
			.noResult {
				padding: 118upx 0;
				text-align: center;
			}

			li {
				margin-top: 30upx;

				.img {
					width: 690upx;
					height: 450upx;
					border-radius: 10upx;
					overflow: hidden;
				}

				h1 {
					font-size: 32upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40upx;
					margin: 24upx 0 14upx 0;
				}

				.title {
					line-height: 40upx;
				}

				.tagList {
					overflow: hidden;
					margin: 14upx 0;

					.item {
						display: inline-block;
						margin: 0 10upx 10upx 0;
						padding: 6upx 14upx;
						background: #FEF2E7;
						border-radius: 4upx;
						font-size: 20upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FE7D15;
					}
				}

				.flex {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
				}

				.start-price {
					&:after {
						color: #FF4D00;
						content: '/人'
					}
				}

				.buyNum {
					margin-left: 15upx;
				}

				.sellNumber {
					color: #999999;
				}
			}
		}
	}
</style>
